import { useRouter } from "@tarojs/taro";
import { View } from "@tarojs/components";

import ByTag from "@/components/ui/ByTag";
import ByRow from "@/components/ui/ByRow";
import ByCol from "@/components/ui/ByCol";
import Card from "@/components/common/Card";
import ByCell from "@/components/ui/ByCell";
import ByText from "@/components/ui/ByText";
import Moment from "@/components/app/Moment";
import Divider from "@/components/app/Divider";

import ApiBudget from "@/api/budget";
import useEnum from "@/hooks/useEnum";
import useFetch from "@/hooks/useFetch";
import { enumMaterialApplyBillsStatus } from "@/packageProject/utils/enum";

import { MaterialBudgetItem } from "@/types/budget";
import Money from "@/components/app/Money";

const enumList = [
  { label: "已申请", key: "appapplyNum" },
  { label: "已开单", key: "billNum" },
  { label: "结算量", key: "jsNum" },
];

const cellProps = { size: "small", labelWidth: "4em" } as const;

const Item = ({
  source,
  isOptional,
}: {
  source: MaterialBudgetItem;
  isOptional: boolean;
}) => {
  return (
    <Card className="m-3" title={source.materialName}>
      <ByRow className="my-2">
        <ByCol span={6}>
          <ByCell label="规格参数" vertical {...cellProps}>
            {source.spec || "/"}
          </ByCell>
        </ByCol>
        <ByCol span={6}>
          <ByCell label="品牌" vertical {...cellProps} labelWidth="2em">
            {source.brandCategory || "/"}
          </ByCell>
        </ByCol>
      </ByRow>

      <ByRow content="between" className="mt-1 bg-page p-2 rounded-md">
        {enumList.map((item) => (
          <View className="text-center" key={item.key}>
            <ByText size="sm" type="second">
              {item.label}
            </ByText>

            <View className="mt-1">{source[item.key] || 0}</View>
          </View>
        ))}
      </ByRow>

      <View className="py-2">
        <ByCell label="销售数量" {...cellProps}>
          {source.applyQuantity}
          {source.unit && <ByText size="sm">/{source.unit}</ByText>}
        </ByCell>

        {isOptional && (
          <ByRow>
            <ByCol span={6}>
              <ByCell label="承包单价" {...cellProps}>
                <Money value={source.contractPrice} />
              </ByCell>
            </ByCol>
            <ByCol span={6}>
              <ByCell label="承包金额" {...cellProps}>
                <Money value={source.contractAmount} />
              </ByCell>
            </ByCol>
          </ByRow>
        )}

        <ByCell label="到场时间" {...cellProps}>
          <Moment value={source.requiredArrivalTime} />
        </ByCell>
      </View>
    </Card>
  );
};

/**
 * BudMaterielApplyBill
 */
interface BudMaterielApplyBill {
  /**
   * 物料申请单ID
   */
  applyBillId: number;
  /**
   * 申请类型
   */
  applyType: number;
  /**
   * 申请人Id
   */
  applyUserId: number;
  /**
   * 申请人
   */
  applyUserName: string;
  /**
   * 审批日期
   */
  approveDate: number;
  /**
   * 审批意见
   */
  approveOpnoin: string;
  /**
   * 审批人ID
   */
  approveUserId: number;
  /**
   * 审批人名称
   */
  approveUserName: string;
  /**
   * 审核总金额
   */
  auditTotalAmount: number;
  /**
   * 单据编号
   */
  billNo: string;
  /**
   * 单据类型
   */
  billType: string;
  /**
   * 预算ID
   */
  budgetId: number;
  /**
   * 创建日期
   */
  createDate: number;
  /**
   * 创建人ID
   */
  createUserId: number;
  /**
   * 创建人名称
   */
  createUserName: string;
  /**
   * 客户地址
   */
  customerAddress: string;
  /**
   * 客户名称
   */
  customerName: string;
  /**
   * 客户编号
   */
  customerNo: string;
  /**
   * 修改日期
   */
  editDate: number;
  /**
   * 修改人ID
   */
  editUserId: number;
  /**
   * 修改人名称
   */
  editUserName: string;
  /**
   * 客户ID
   */
  intentCustomerId: number;
  /**
   * 是否售后
   */
  isAfterSale: boolean;
  /**
   * 是否关闭
   */
  isClosed: boolean;
  /**
   * 是否驳回
   */
  isReject: boolean;
  /**
   * 是否工人申请
   */
  isWorkerApply: boolean;
  /**
   * 物料类别
   */
  materielCategory: string;
  /**
   * 测量ID
   */
  measureId: number;
  /**
   * 组织代码
   */
  orgCode: string;
  /**
   * 组织名称
   */
  orgName: string;
  /**
   * 驳回日期
   */
  rejectDate: number;
  /**
   * 驳回原因
   */
  rejectReason: string;
  /**
   * 驳回人ID
   */
  rejectUserId: number;
  /**
   * 驳回人名称
   */
  rejectUserName: string;
  /**
   * 备注
   */
  remark: string;
  /**
   * 提醒用户IDs
   */
  remindUserIds: string;
  /**
   * 提醒用户名称
   */
  remindUserNames: string;
  /**
   * 维修订单编号
   */
  repairOrderBillNo: string;
  /**
   * 维修订单ID
   */
  repairOrderId: number;
  /**
   * 拆分状态
   */
  spiltStatus: number;
  /**
   * 状态 0代表正在编制 1 代表已提交待审核 2 代表已审核(保留状态，未使用) 3 代表已部分发货　4代表已全部发货完成
   */
  status: number;
  /**
   * 提交日期
   */
  submitDate: number;
  /**
   * 提交人ID
   */
  submitUserId: number;
  /**
   * 提交人名称
   */
  submitUserName: string;
  /**
   * 工人ID
   */
  workerId: number;
  /**
   * 工人名称
   */
  workerName: string;
  /**
   * 工作流实例ID
   */
  workFlowInstanceId: number;
  [property: string]: any;
}

export default () => {
  const { params } = useRouter();
  const applyBillId = Number(params.applyBillId);

  const { data } = useFetch<{
    details: MaterialBudgetItem[];
    master: BudMaterielApplyBill;
  }>(ApiBudget.getMaterialApplyById, {
    defaultParams: [{ applyBillId }],
    showLoading: true,
  });

  const { master, details } = data || {};
  const { getOption } = useEnum(enumMaterialApplyBillsStatus);

  // 是否是自选材料
  const isOptional = master?.materielCategory === "自选材料";

  return (
    <>
      <Card>
        <ByRow content="between" align="center" className="my-2">
          <View>{master?.materielCategory}申请单</View>
          <ByTag type={getOption(master?.status, "color")}>
            {getOption(master?.status, "label")}
          </ByTag>
        </ByRow>

        <Divider />

        <ByCell label="提醒人" size="small">
          {master?.remindUserNames || "/"}
        </ByCell>

        <ByRow wrap>
          <ByCol span={6}>
            <ByCell label="提交人" vertical>
              {master?.submitUserName || "/"}
            </ByCell>
          </ByCol>
          <ByCol span={6}>
            <ByCell label="提交时间" vertical>
              <Moment value={master?.submitDate} />
            </ByCell>
          </ByCol>
          <ByCol span={6}>
            <ByCell label="审批人" vertical>
              {master?.approveUserName || "-"}
            </ByCell>
          </ByCol>
          <ByCol span={6}>
            <ByCell label="审批时间" vertical>
              <Moment value={master?.approveDate} placeholder="/" />
            </ByCell>
          </ByCol>
          <ByCol span={12}>
            <ByCell label="审批意见" vertical>
              {master?.approveOpnoin || "/"}
            </ByCell>
          </ByCol>
        </ByRow>
      </Card>

      {details?.map((item) => (
        <Item source={item} key={item.materialId} isOptional={isOptional} />
      ))}
      <View className="py-1" />
    </>
  );
};
